<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="600px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
        <el-form :model="formData" ref="formRef">
                <el-form-item label="类型" :label-width="120">
                    <el-radio-group v-model="formData.type">
                        <el-radio :value="1">增加</el-radio>
                        <el-radio :value="2">减少</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="数量" :label-width="120">
                    <el-input v-model="formData.number" style="width: 240px" placeholder="Please input" type="number"/>
                </el-form-item>
                <el-form-item label="备注" :label-width="120">
                    <el-input v-model="formData.remark" type="textarea" :rows="4" />
                </el-form-item>
            </el-form>
            
        </popup>
    </div>
</template>

<script lang="ts" setup name="roomEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { goodsStock } from '@/api/goods'
import { goodsCateLists } from '@/api/classify'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import { ref, computed, onMounted, reactive, shallowRef } from 'vue'

// 定义配置项接口

// 定义配置对象接口

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const editId = ref(0)

// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑库存' : '编辑库存'
})

const formData = ref({
    type: 1,
    number: 1,
    remark: ''
})


// 在组件挂载时初始化配置项
onMounted(() => {})

// 获取详情
const setFormData = async (data: Record<any, any>) => {
    editId.value = data.id
}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData.value }
    
    await goodsStock({ ...data, goods_id: editId.value })
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData
})
</script>

<style scoped>
.config-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.config-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.config-key-input {
    width: 200px;
}

.config-value-input {
    flex: 1;
}
</style>
